<script>
import { reactive, toRefs } from 'vue';
import request from '../request';
export default {
	name: 'SpacePage',
	components: {},
	setup() {
		const data = reactive({
			list: [],
			nomore: false,
			page: 1,
			size: 10,
			total: 10,
		});
		const init = (page = 1, size = 10) => {
			data.page = page;
			data.size = size;
			const params = {
				type: 'record',
				page,
				size,
			};
			request('/getHome', params).then((res) => {
				console.log('res', res);
				if (res.status === 'S') {
					if (res.data.length > 0) {
						data.list = res.data;
						data.total = res.count.total;
						data.nomore = false;
					} else {
						data.list = [];
						data.total = 10;
						data.nomore = true;
					}
				} else {
					data.nomore = true;
				}
			});
		};
		init();

		// 分页事件
		const pageChange = (e) => {
			console.log('e', e);
			init(e, data.size);
		};
		const pageChange1 = (e) => {
			console.log('e', e);
			init(data.page, e);
		};
		return {
			...toRefs(data),
			pageChange,
			pageChange1,
		};
	},
};
</script>
<template>
	<div class="space-page flexc">
		<homelayout :list="list" :nomore="nomore" />
		<div class="home-footer flexr flexcc flex-j-e">
			<el-pagination
				v-model:current-page="page"
				v-model:page-size="size"
				:page-sizes="[10, 20, 30, 40, 50]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@current-change="pageChange"
				@size-change="pageChange1"
				hide-on-single-page
			/>
		</div>
	</div>
</template>
<style lang="less">
.space-page {
	height: 100%;
	width: 100%;
}
</style>
